<template>
	<view class="storeBox">
		<view class="topMenu">
			<view class="check" @click="goToPage('store')">
				<view class="">订单</view>
				<view class="hr"></view>
			</view>
			<view class="" @click="goToPage('afterSales')">
				<view class="">售后订单</view>
				<view class="hr"></view>
			</view>
		</view>
		<view class="warn">统计订单时间：{{ storeInfo.orderStatisticsTimeBegin }}-{{ storeInfo.orderStatisticsTimeEnd }}</view>
		<view class="notice">
			<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/laba.png" mode=""></image>
			<view class="">{{ storeInfo.merchantAnnouncement }}</view>
		</view>
		<view class="menuContent">
			<view class="menuList menuTop">
				<view class="">菜单列表</view>
				<view class="">当前单量</view>
			</view>
			<view class="menuList" v-for="(item, index) in storeInfo.hcOrderDetailedList" :key="index">
				<view class="">
					{{ item.tradeName }}
					<text v-if="item.specifications">({{ item.specifications }})</text>
				</view>
				<view class="">{{ item.commodityQuantity }}份</view>
			</view>
			<view class="total">
				总订单量:
				<text>{{ storeInfo.orderTotal }}份</text>
			</view>
		</view>
		<view class="storeState">
			<view class="title">
				{{ storeInfo.storeName }}门店出餐状态:
				<text :class="{ error: storeInfo.storeStatus == '未接单', ing: storeInfo.storeStatus == '出餐中', success: storeInfo.storeStatus == '已出餐' }">
					{{ storeInfo.storeStatus }}
				</text>
			</view>
			<view class="state">
				<view class="" @click="changeStoreState('accept')">接单</view>
				<view class="" @click="changeStoreState('alerdy')">已出餐</view>
				<view class="" @click="handleExportXls">
					<view class="">导出</view>
					<view class="num">{{ storeInfo.notExportedCount }}</view>
				</view>
			</view>
		</view>
		<view class="orderContent">
			<view class="allCheck" @click="changeAllCheck">
				<checkbox value="index" :checked="allChecked" />
				<view class="">全选</view>
			</view>
			<view class="tableBox" v-if="orderList.length != 0">
				<view class="table" :style="{ width: trWidthTotal + 'rpx' }">
					<view class="tr">
						<view class="td"></view>
						<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }">地址</view>
						<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">序号</view>
						<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">姓名</view>
						<view class="td" :style="{ width: trWidthArr[3] + 'rpx' }">菜品</view>
						<view class="td" :style="{ width: trWidthArr[4] + 'rpx' }">备注</view>
						<view class="td">付款时间</view>
					</view>
					<view class="tr" v-for="(item, index) in orderList" :key="index">
						<view class="td" @click="changeRadioState(index)"><checkbox :checked="item.checked" /></view>
						<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }">{{ item.supplyAddress }}</view>
						<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">{{ item.pickingSerialNo }}</view>
						<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">{{ item.nameTakingMeal }}</view>
						<view class="td" :style="{ width: trWidthArr[3] + 'rpx' }">
							<text v-for="(foodItem, foodIndex) in item.hcOrderDetailedList" :key="foodIndex">
								<text>
									{{ foodItem.tradeName }}
									<text v-if="foodItem.specifications">({{ foodItem.specifications }})</text>
								</text>
								<text :class="{ error: foodItem.commodityQuantity > 1 }">x{{ foodItem.commodityQuantity }}</text>
								<text v-if="foodIndex != item.hcOrderDetailedList.length - 1">,</text>
							</text>
						</view>
						<view class="td" :style="{ width: trWidthArr[4] + 'rpx' }">{{ item.remarks ? item.remarks : '无' }}</view>
						<view class="td">{{ item.createTime }}</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无订单数据" mode="page" v-if="orderList.length == 0"></u-empty>

			<!-- <view class="orderList table" v-for="(item,index) in orderList" :key="index"
				@click="changeRadioState(index)">
				<checkbox :checked="item.checked" />
				<view class="">
					<view class="">
						<view class="">地址: <text>{{item.supplyAddress}}</text></view>
						<view class="">序号: <text>{{item.pickingSerialNo}}</text></view>
						<view class="">姓名: <text>{{item.nameTakingMeal}}</text></view>
					</view>
					<view class="foods">
						<view class="">菜品: </view>
						<view class="det" v-for="(foodItem,foodIndex) in item.hcOrderDetailedList" :key="foodIndex">
							<text>{{foodItem.tradeName}}</text>
							<text :class="{'error':foodItem.commodityQuantity>1}">X{{foodItem.commodityQuantity}}</text>
							<text v-if="foodIndex!=item.hcOrderDetailedList.length-1">,</text>
						</view>
					</view>
					<view class="">
						<view class="note">备注: <text>{{item.remarks?item.remarks:'无'}}</text></view>
					</view>
					<view class="">
						<view class="">付款时间: <text>{{item.createTime}}</text></view>
					</view>
				</view>
			</view> -->
		</view>
		<MyFooter :checkIndex="0"></MyFooter>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getStoreSystemInfo, getStoreGoodList, exportExcelById, changeStoreState } from '@/utils/req/api.js';
import MyFooter from '@/components/footer/footer.vue';
export default {
	components: {
		MyFooter
	},
	data() {
		return {
			storeInfo: '',

			allChecked: false,
			checked: false,
			orderList: [],
			pageNo: 1,
			pageSize: -1,
			moreOrderFlag: false,
			ids: [],

			trWidthArr: [2, 2, 2, 2, 2],
			trWidthTotal: ''
		};
	},
	onLoad() {
		console.log('我是首页，我加载了');
	},
	onShow() {
		this.getStoreSystemInfo();
		this.getStoreGoodList();
		this.trWidthArr = [2, 2, 2, 2, 2];
		this.trWidthTotal = 0;
		this.allChecked = false;
		this.ids = [];
	},
	methods: {
		//获取商家的相关信息
		async getStoreSystemInfo() {
			let res = await getStoreSystemInfo();
			this.storeInfo = res.data.result;
			let total = 0;
			this.storeInfo.hcOrderDetailedList.forEach(item => {
				total = item.commodityQuantity + total;
			});
			this.storeInfo.orderTotal = total;
		},
		//获取商家订单信息
		async getStoreGoodList(type) {
			let res = await getStoreGoodList({
				// current: 1,
				// size: this.pageNo * this.pageSize,
				pageNo: 1,
				pageSize: this.pageNo * this.pageSize
			});
			this.orderList = [];
			this.orderList = res.data.result.records;
			this.trWidthArr = [2, 2, 2, 2, 2];

			this.orderList.forEach(item => {
				item.checked = false;
				item.createTime = item.createTime.split(' ')[1];
				if (item.supplyAddress && item.supplyAddress.length > this.trWidthArr[0]) {
					this.trWidthArr[0] = item.supplyAddress.length;
				}
				if (item.pickingSerialNo && item.pickingSerialNo.length > this.trWidthArr[1]) {
					this.trWidthArr[1] = item.pickingSerialNo.length;
				}
				if (item.nameTakingMeal && item.nameTakingMeal.length > this.trWidthArr[2]) {
					this.trWidthArr[2] = item.nameTakingMeal.length;
				}
				let strStemp = '';
				if (item.hcOrderDetailedList && item.hcOrderDetailedList.length != 0) {
					item.hcOrderDetailedList.forEach((childItem, childIndex) => {
						strStemp = strStemp + '(' + childItem.specifications + ')x' + childItem.commodityQuantity + ',';
					});
				}
				let foodStr = item.nameDishes + strStemp;
				console.log('foodStr', foodStr);
				if (foodStr && foodStr.length > this.trWidthArr[3]) {
					this.trWidthArr[3] = strStemp.length + item.nameDishes.length;
				}
				if (item.remarks.length > this.trWidthArr[4]) {
					this.trWidthArr[4] = item.remarks.length;
				}
				// if (item.createTime.length > this.trWidthArr[5]) {
				// 	this.trWidthArr[5] = item.createTime.length
				// }
			});
			let trWidthTotal = 0;
			this.trWidthArr.forEach((item, index) => {
				this.$set(this.trWidthArr, index, item * 28 + 50);
				trWidthTotal = trWidthTotal + (item * 28 + 50) + 20;
			});
			console.log(this.trWidthArr);
			this.trWidthTotal = trWidthTotal + 200;

			console.log('defaultOneWidth', this.defaultOneWidth);
			console.log('res', res);
		},
		//全选
		changeAllCheck() {
			this.allChecked = !this.allChecked;
			let ids = [];
			this.orderList.forEach(item => {
				item.checked = this.allChecked;
				if (this.allChecked) {
					ids.push(item.id);
				}
			});
			this.ids = ids;
		},
		//单选
		changeRadioState(index) {
			console.log(6666);
			let obj = JSON.parse(JSON.stringify(this.orderList[index]));
			obj.checked = !obj.checked;
			this.$set(this.orderList, index, obj);

			let ids = [];
			this.orderList.forEach(item => {
				if (item.checked) {
					ids.push(item.id);
				}
			});
			this.ids = ids;
			if (ids.length == this.orderList.length) {
				this.allChecked = true;
			}
		},
		//导出
		async handleExportXls() {
			uni.navigateTo({
				url: '/pages/export/export?ids=' + this.ids.join(',') + '&token=' + uni.getStorageSync('token') + '&storeName=' + this.storeInfo.storeName
			});
		},
		async changeStoreState(type) {
			let obj = {
				storeStatus: type == 'accept' ? '出餐中' : '已出餐'
			};
			let res = await changeStoreState(obj);
			if (res.data.success) {
				this.storeInfo.storeStatus = res.data.result.storeStatus;
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		},
		//跳转公用函数
		goToPage(type) {
			let url;
			switch (type) {
				case 'store':
					url = '/pages/index/index';
					break;
				case 'afterSales':
					url = '/pages/index/afterOrder';
					break;
			}
			uni.navigateTo({
				url
			});
		}
	},
	onReachBottom() {
		if (!this.moreOrderFlag) {
			if (this.orderList.length != 0 && this.orderList.length % this.pageSize == 0) {
				this.pageNo = this.pageNo + 1;
				this.moreOrderFlag = true;
				this.getStoreGoodList();
				setTimeout(() => {
					this.moreOrderFlag = false;
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.storeBox {
	background-color: #f5f5f5;
	padding-bottom: 150rpx;
	min-height: 100vh;
}

.topMenu {
	padding: 20rpx 0;
	background-color: #fff;
	padding: 20rpx;
	@include flex(flex-start, flex-start);

	> view {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		> view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #f1b825;
			margin: 0 auto;
			margin-top: 10rpx;
			display: none;
		}
	}

	> .check {
		color: #000;

		> view:nth-child(2) {
			display: block;
		}
	}
}

.warn {
	background-color: #f6e2d4;
	color: #fa690a;
	font-size: 28rpx;
	line-height: 2;
	padding: 10rpx 60rpx;
}

.notice {
	@include flex(flex-start, flex-start);
	padding: 40rpx;
	background-color: #fff;
	color: rgba(0, 0, 0, 0.55);

	> view {
		font-size: 28rpx;
		line-height: 1.5;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
}

.menuContent {
	padding: 40rpx;
	background-color: #fff;
	margin-top: 20rpx;

	> view {
		@include flex(space-between, center);
		font-size: 30rpx;
		line-height: 1.5;
		margin-bottom: 20rpx;
		background-color: #f5f5f5;
		padding: 15rpx 20rpx;

		> view:nth-child(1) {
			max-width: 80%;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	> .menuTop {
		// color: rgba(0, 0, 0, 0.55);
		font-weight: bold;
		color: #000;
	}

	.total {
		@include flex(flex-end, center);
		background-color: #fff;
		padding-right: 0;
		color: rgba(0, 0, 0, 0.55);

		text {
			color: #000;
			margin-left: 10rpx;
		}
	}
}

.storeState {
	padding: 40rpx;
	background-color: #fff;
	margin-top: 20rpx;

	.title {
		font-size: 30rpx;
		line-height: 2;
		font-weight: bold;

		text {
			margin-left: 10rpx;
			font-weight: 100;
		}

		.error {
			color: red;
			font-weight: bold;
		}

		.ing {
			color: #6abceb;
			font-weight: bold;
		}

		.success {
			color: #7ccf85;
			font-weight: bold;
		}
	}

	.state {
		@include flex(space-between, center);
		margin-top: 20rpx;

		> view {
			width: 28%;
			border-radius: 100rpx;
			// border: 1px solid #F1B825;
			// color: #F1B825;
			background-color: #fa690a;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			line-height: 2;
			padding: 5rpx 0;
			position: relative;

			.num {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #fd2a2a;
				font-size: 24rpx;
				line-height: 30rpx;
				color: #fff;
				text-align: center;
			}
		}
	}
}

.orderContent {
	margin-top: 20rpx;
	width: 100%;
	background-color: #fff;

	/deep/ {
		.u-empty {
			padding: 80rpx 0;
			background-color: #fff;
			width: calc(100% - 40rpx);
			margin: 0 auto;
			border-radius: 10rpx;
			min-height: 30vh;
		}
	}

	.allCheck {
		@include flex();
		font-size: 28rpx;
		line-height: 2;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		padding: 10rpx 40rpx;

		uni-checkbox {
			margin-right: 10rpx;
		}
	}

	.tableBox {
		overflow: hidden;
		overflow-x: scroll;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.table {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		scroll-view {
			width: 1000px !important;
		}

		.tr {
			display: flex;
			border: 1px solid #eee;
			border-bottom: 0;
			color: #000;
			max-height: 150rpx;

			&:nth-child(1) {
				background-color: #eee;
				border: 0;

				.td {
					color: #000;
				}
			}

			&:last-child {
				border-bottom: 1px solid #ccc;
			}

			.td {
				padding: 10rpx;
				font-size: 28rpx;
				width: 100rpx;
				text-align: center;
				flex-shrink: 0;
				line-height: 1.5;

				&:first-child {
					width: 50rpx;
				}

				&:last-child {
					// width: 360rpx
				}

				&:nth-child(5) {
					text-align: left;
				}

				.error {
					color: red;
					font-weight: bold;
					font-size: 32rpx;
				}

				&:last-child {
					width: 200rpx;
				}
			}
		}
	}

	.orderList {
		@include flex(flex-start, flex-start);
		font-size: 28rpx;
		line-height: 2;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 40rpx;

		uni-checkbox {
			margin-right: 10rpx;
		}

		> view {
			@include flex(flex-start, flex-start);
			flex-direction: column;
			width: 100%;
			flex-wrap: wrap;

			> view {
				width: 100%;
				@include flex();
				flex-wrap: wrap;
				// color: rgba(0, 0, 0, 0.55);
				color: #000;

				text {
					color: #000;
					margin: 0 20rpx;
				}
			}

			> .foods {
				@include flex(flex-start, flex-start);
				line-height: 1.5;

				> .det {
					flex: 1;
					margin-left: 20rpx;

					text {
						margin-left: 0;
						margin-right: 4rpx;
						line-height: 1.5;
					}

					.error {
						color: red;
						font-weight: bold;
						font-size: 32rpx;
					}
				}
			}

			> .w30 {
				> view {
					width: calc(100% / 3);
				}
			}

			> .w10 {
				@include flex(flex-start, flex-start);

				> view:nth-child(2) {
					@include flex();
					flex-wrap: wrap;

					> view {
						width: 50%;
						color: #000;
						padding-left: 10rpx;
					}
				}
			}

			> .w50 {
				.note {
					font-size: 32rpx;
					line-height: 2;
				}

				> view {
					// width: 50%;
				}
			}
		}
	}
}
</style>
<style lang="scss">
.storeBox {
	/deep/.uni-checkbox-input {
		border-radius: 50%;
		width: 35rpx;
		height: 35rpx;
		// border-color: #FA690A !important;
	}

	/deep/.uni-checkbox-input-checked {
		color: #fa690a !important;
		border: 1px solid #fa690a !important;
	}
}
</style>
